<!-- eslint-disable @typescript-eslint/no-unused-vars -->
<!-- eslint-disable vue/require-v-for-key -->
<template>
  {{ spec_list }}
  <hr>
  <li v-for="(item,index) in spec_list">
    <h3>
      <span>规格名 ： <el-input placeholder="请输入规格名" size="small"   style="width:120px"   type="text" v-model="item.name" /></span>
    </h3>
    <p>
      规格值 ：

      <span v-for="(item2,index2) in item.list">
        <el-input type="text" placeholder="请输入值" size="small" style="width:120px"  v-model="item2.name">

          <template #suffix>
            <el-icon @click="delVlaue(index,index2)" class="el-input__icon"><Delete /></el-icon>
          </template>
          </el-input>
      </span>
      <el-button @click="addSpecValue(index)">新增规格值</el-button>
    </p>

    <el-button type="danger" v-if="index!==0" @click="delSpec(index)">删除</el-button>
<hr>
  </li>

  <el-button @click="addSpec">新增规格</el-button>

  {{sku_list}}
<!-- el-table -->
</template>
<script setup lang="ts">
import { Delete } from '@element-plus/icons-vue';
import { ref ,computed} from 'vue'

interface spec_list_type {
  name: string
  list: { name: string }[]
}

const spec_list = ref<spec_list_type[]>([
  {
    name: '默认',
    list: [
      {
        name: '',
      },
    ],
  },
])

function  addSpecValue (index:number) {
console.log(index)
spec_list.value[index].list.push( {
        name: '',
      })
}

function  delSpec(index:number) {
  spec_list.value.splice(index,1)
}

function  delVlaue(index:number,index2:number) {
  // console.log(index);
  // console.log(index2);
  spec_list.value[index].list.splice(index2,1)
}

function  addSpec () {

spec_list.value.push(   {
    name: '',
    list: [
      {
        name: '',
      },
    ],
  },)
}



const sku_list = computed(function () {

  let result = [[]]

      spec_list.value.forEach(function(item:any) {
           const  _list:any = []

        result.forEach((res:any)=>{

          item.list.forEach((v:any)=>{
                  // const _res = res[item.name] || []

                  // let  _res = res.find((v:any)=>{
                  //   return v.key === item.name
                  // })

                  // console.log(_res)

                  // _res =  _res?[..._res.value]:[];
            _list.push([...res,{
              key:item.name,
              value:v.name
            },])
          })
        })
        // [[{key:"颜色",'value':"红色"},{key:"颜色",'value':"白色"}]]

        // [['红色','1KG'],['红色','2KG'],['白色','1KG'],['白色','2KG']]
     //  [['红色','1KG','铁'],['红色','1KG','玻璃']，['红色','2KG','铁']，['红色','2KG','玻璃'],
        //  ['白色','1KG'，‘铁’], ['白色','1KG'，‘玻璃’]，['白色','2KG'，‘铁’]，['白色','2KG'，‘玻璃’]]
        //  console.log(result)

        result = _list


      })
      console.log(result)


      result =  result.map(v=>{


        // [ { "key": "颜色", "value": "红色" }, { "key": "重量", "value": "1" } ]

       return  v.map((v2:any)=>{

          return {
          ...v2,
          img:'',
          price:'',
          stock:0,
          disabled:false
        }
        })

      })

      console.log(result)

      return result

})


</script>
